<template>
	<view class="wanl-money" @click="showSelect=false">
		<wanl-navbar :isBack="true" :background="{background: '#fff',}" :showGongNeng="true">
			<text
				slot="content"
				style="color: #000; width: 100%;padding-left: 20rpx;"
			>
				抽奖记录
			</text>
		</wanl-navbar>
		<view class="edgeInsetTop">
			<view style="font-size: 34rpx;position: relative">
				<view @click.stop="showSelect=true" style="display: flex;justify-content: flex-start;align-items: center;">
					<text>{{ activeIndex=='0'?'全部':(activeIndex=='1'?'已中奖':'未中奖') }}</text>
					<u-icon style="margin-left: 6rpx;" :name="showSelect?'arrow-up':'arrow-down'" :size="14" :color="'#333'"></u-icon>
				</view>
				<view v-if="showSelect" style="position:absolute;left: -10px;z-index: 100;border-bottom-left-radius: 20rpx;border-bottom-right-radius: 20rpx;padding: 20rpx 0;background: #fff;width: 60vw;">
					<view class="select-item" :class="activeIndex=='0'?'active':''" @click.stop="chooseOne('0')">全部</view>
					<view class="select-item" :class="activeIndex=='1'?'active':''" @click.stop="chooseOne('1')">已中奖</view>
					<view class="select-item" :class="activeIndex=='2'?'active':''" @click.stop="chooseOne('2')">未中奖</view>
				</view>
			</view>
			<view style="color: #666666;text-align: right;font-size: 30rpx">总抽奖 <text class="font-red">{{total}}</text>次,中奖 <text class="font-red">
				{{ zhongjiangTotal }}</text>次</view>
		</view>
		<view class="cu-list menu-avatar" v-if="dataList">
			<view class="cu-item" v-for="(item, index) in dataList" :key="item.id" @tap="toMoney(item)" >
				<view class="cu-avatar round">
					<view v-if="item.name=='谢谢惠顾'" class="weizhongjiang"></view>
					<image v-else :src="item.goods_img" mode="widthFix" style="width: 100%"></image>
<!--					$wanlshop.oss(item.img, 50, 50)-->
				</view>
				<view class="content">
					<view class="text-sm flex" style="margin-top: 20rpx">
						<view class="text-cut">
							{{item.name=='谢谢惠顾'?'未中奖':(item.name+'-'+item.goods_name)}}
						</view>
						<view class="wanl-gray text-sm text-bold" style="margin-left: 20rpx" v-if="item.type=='1'" :class="item.status=='1'?'green':'red'">{{item.status_text}}</view>
					</view>
					<view class="wanl-gray text-sm" style="margin-top: 20rpx">
						{{ '抽奖时间: '+item.create_time_text }}
					</view>
				</view>
<!--				-->
				<view class="action" v-if="item.type=='1'&&item.status=='1'" @click="lingjiang(item)">
<!--					<view class="text-lg" :class="item.money > 0 ? 'wanl-orange' : 'wanl-black'">{{ item.money > 0 ? '+'+item.money:item.money}}-->
<!--					</view>-->
<!--					<image style="width: 100%;" mode="widthFix" src="https://d-shenhuashop.bigchun.com/h5test/yuanbao/choujiangHistory/lingqu.png" @click="lingjiang(item)"></image>-->
				</view>
			</view>
		</view>
		<!-- 空 -->
		<view v-if="dataList.length == 0 && loading == false">
			<wanl-empty src="ticket_default3x" text="没找到任何抽奖明细"/>
		</view>
		<view class="edgeInsetBottom"></view>
		<uni-load-more :status="status" :content-text="contentText" />
	</view>
</template>

<script>

export default {
	data() {
		return {
			dataList: [],
			payType: {
				pay: '商品交易',
				groups: '拼团',
				recharge: '充值',
				withdraw: '提现',
				refund: '退款',
				sys: '系统',
			},
			loading:true,
			reload: false, //判断是否上拉
			total: 0, //数据量
			current_page: 1, //当前页码
			last_page: 1, //总页码
			status: 'more',
			contentText: {
				contentdown: ' ',
				contentrefresh: '加载中',
				contentnomore: ''
			},
			zhongjiangTotal:'',
			activeIndex:'0',
			showSelect:false
		};
	},
	computed: {
	
	},
	onShow() {
		this.current_page = 1;
		this.reload = true;
		this.dataList = [];
		this.loadData();
	},
	onPullDownRefresh() {
		this.current_page = 1;
		this.reload = true;
		this.loadData();
	},
	onReachBottom() {
		//判断是否最后一页
		if (this.current_page >= this.last_page) {
			this.status = 'noMore';
		} else {
			this.reload = false;
			this.current_page = this.current_page + 1; //页码+1
			this.status = 'loading';
			this.loadData();
		}
	},
	methods: {
		async loadData() {
			await uni.request({
				url: '/wanlshop/user/user_gift_lists',
				method: 'POST',
				data: {
					type:this.activeIndex,
					page: this.current_page
				},
				success: res => {
					uni.stopPullDownRefresh();
					this.loading= false;
					this.dataList = this.reload ? res.data.data : this.dataList.concat(res.data.data); //数据 追加
					this.total = res.data.total; //数据量
					this.zhongjiangTotal = res.data.success_count;
					this.current_page = res.data.current_page; //当前页码
					this.last_page = res.data.last_page; //总页码
					this.status = res.data.total == 0 ? 'noMore' : 'more';
				}
			});
		},
		lingjiang(item){
			let good_data = [{
				goods_name:item.goods_name,
				goods_img:item.goods_img,
				goods_id:item.goods_id,
			}]
			this.$wanlshop.to(`/pages/apps/jinyuanbao/shangpin/tijiaoOrder?good_data=${JSON.stringify(good_data)}&id=${item.id}`);
		},
		chooseOne(index){
			this.activeIndex = index;
			this.showSelect = false
		}
	}
};
</script>

<style>
.wanl-money .balance {
	margin: 10rpx 25rpx 25rpx 25rpx;
}

.wanl-money .balance .details {
	padding: 50rpx 0;
}

.wanl-money .balance .operate {
	display: flex;
	align-items: center;
	justify-content: space-around;
	background: rgba(0, 0, 0, 0.1);
	height: 80rpx;
	color: #fff;
}

.wanl-money .cu-list.menu-avatar>.cu-item{
	height: 180rpx;
	align-items: flex-start;
	padding: 25rpx 0;
	margin: 26rpx 0 0;
}

.wanl-money .cu-list.menu-avatar>.cu-item .cu-avatar {
	width: 125rpx;
	height: 125rpx;
	left: 25rpx;
	margin-top: 6rpx;
}

.wanl-money .cu-list.menu-avatar>.cu-item .content {
	left: 180rpx;
	width: calc(100% - 75rpx - 25rpx -150rpx);
	line-height: 1.5em;
}

.wanl-money .cu-list.menu-avatar>.cu-item .action{
	width: 130rpx;
	height: 100%;
	text-align: right;
	margin-right: 25rpx;
	background: url('https://d-shenhuashop.bigchun.com/h5test/yuanbao/choujiangHistory/lingqu.png') no-repeat center;
	background-size: 100%;
}
.edgeInsetTop{
	border-top: 2rpx solid #F8F8F8;
	//height: 60rpx;
	width: 100vw;
	padding: 20rpx 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #fff;
	
}
.font-red{
	color: #FC6A24;
}
.green{
	color:#28C445;
}
.red{
	color: #FC6A24;
}
.weizhongjiang{
	background:url('https://d-shenhuashop.bigchun.com/h5test/yuanbao/choujiangHistory/weizhongjiang.png') no-repeat center;
	background-size:100%;
	width: 100%;
	height: 100%;
}
.select-item{
	padding: 20rpx;
	border-bottom: 2rpx solid #f8f8f8;
	&:last-child{
		border-bottom: 0rpx solid #f8f8f8;
	}
	&.active{
		color: #f1a532;
		background: #f8f8f8;
	}
}
</style>
